import React from 'react'
import { ImagePicker, WingBlank,Badge, Toast } from 'antd-mobile';
import './index.css'
import Axios from 'axios';
export default class Slidebar extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      files: [],
      loginStatus:false,
      loginInfo:{},
    }
  }
  componentWillMount(){
    Axios.post('http://localhost:8000/login/status?timestap='+Date.now()).then(({data})=>{
      //console.log(data)
      this.setState({
        loginInfo:data.profile,
        loginStatus:true
      });
    }).catch((res)=>{
      console.log(res)
    })
    
  }
  
  onChange = (files, type, index) => {
    this.setState({
      files,
    });
  }
  loginOut=()=>{
    Axios.post('http://localhost:8000/logout').then(({data})=>{
        Toast.success('退出成功',1,()=>{
          window.location.href='/';
          this.setState({
            loginStatus:false
          })
        });
        
    })
    
  
  }
  render(){
    //console.log(this.state.loginInfo)
    return (
      <WingBlank className='userImg'>
        {this.state.loginStatus?<span>
          <ImagePicker
            length='1'
            disableDelete={true}
            files={this.state.files}
            onChange={this.onChange}
            selectable={false}
            style={{backgroundSize:'contain',background:'url('+this.state.loginInfo.avatarUrl+')'}}
          />
          <div className='userInfo'>
            <p>
              <span>{this.state.loginInfo.nickname}</span>
              <Badge text={`Lv.${this.state.loginInfo.follows+1}`}
                style={{
                  margin:"0 5px",
                  background:'#ccc',
                  borderRadius: 20,
                  color:'#555'
                }}
              />
            </p>
            <p><Badge text="签到"
        style={{
          marginRight:-1,
          padding: '3px 15px',
          background:'linear-gradient(to right,rgb(255, 92, 63) 10%,rgb(255, 66, 59) 80%)',
          borderRadius: 20,
          color: '#fff'
        }}
      /></p>
          </div>
          <div className='vip'>
            
          </div>
        </span>:<div className='islogin'>
          <p>
          <span>登录网易云音乐</span><br/>
          <span>手机电脑多端同步,尽享海量高品质音乐</span>
          </p>
          <p>
            <a href='/login'>立即登录</a>
          </p>
          </div>}
          <div className='content'>
            <ul>
              <li><img src='https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png' alt=''/><a>我的消息</a></li>
              <li><img src='https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png' alt=''/><a>我的好友</a></li>
              <li><img src='https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png' alt=''/><a>个性皮肤</a></li>
              <li><img src='https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png' alt=''/><a>听歌识曲</a></li>
            </ul>
          </div>
          {this.state.loginStatus?<button style={{}} onClick={()=>this.loginOut()}>退出登录</button>:""}
      </WingBlank>
    );
  }
}